<!DOCTYPE html>
<html>
<head>
  <title></title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
  构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外：data 必须是函数

  例：data:function(){}


  使用 $on(eventName) 监听事件
  使用 $emit(eventName) 触发事件
-->
<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<script type="text/javascript">
  Vue.component('button-counter', {
    template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
    data: function () {
      return {
        counter: 0
      }
    },
    methods: {
      incrementCounter: function () {
        this.counter += 1
        this.$emit('increment')
      }
    },
  })

  new Vue({
    el: '#counter-event-example',
    data: {
      total: 0
    },
    methods: {
      incrementTotal: function () {
        this.total += 1
      }
    }
  })
</script>



<br/>
<br/>
<br/>
<hr/>
<div id="demo">
  <div>
    <input type="" name=""  v-model="price1">
  </div>
  <currency-input v-model="price"></currency-input>
</div>
<script type="text/javascript">
  Vue.component('currency-input', {
    template: '\
      <span>\
        $\
        <input\
          ref="input"\
          v-bind:value="value"\
          v-on:input="updateValue($event.target.value)"\
        >\
      </span>\
    ',
    props: ['value'],
    methods: {
      // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
      updateValue: function (value1) {
        var formattedValue = value1
          // 删除两侧的空格符
          .trim()
          // 保留 2 位小数
          .slice(
            0,
            value1.indexOf('.') === -1
              ? value1.length
              : value1.indexOf('.') + 3
          )
        // 如果值尚不合规，则手动覆盖为合规的值
        if (formattedValue !== value1) {
          this.$refs.input.value1 = formattedValue
        }
        // 通过 input 事件带出数值
        this.$emit('input', Number(formattedValue))
      }
    }
  });
  var vm = new Vue({
    el:"#demo",
    data:{
      price: 0,
      price1:"1",
    }
  })
</script>
</body>
</html>